<template>
  <div>
    <header class="header">
        <el-form ref="form"  :inline="true" :model="form" size="mini">
            <el-form-item label="记录时间">
                <el-date-picker 
                    type="datetime" 
                    v-model="form.recordDate"
                    readonly
                    format="yyyy-MM-dd HH:mm"
                    value-format="yyyy-MM-dd HH:mm"
                    placeholder="2022-07-21 19:00"
                    style="width: 100%;">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-s-claim" @click="onSubmit">保存</el-button>
            </el-form-item>
            <el-form-item>
                <el-button>护理问题</el-button>
            </el-form-item>
        </el-form>
    </header>
    <el-main class="main">
        <el-form :model="form" :inline="true" size="mini">
            <el-form-item label="科室">
                <el-input v-model="form.keshi" placeholder="请输入内容"></el-input> 
           </el-form-item>
            <el-form-item label="病区：">
                <el-input v-model="form.bingqu" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="姓名：">
                <el-input v-model="form.name" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="床号：">
                <el-input v-model="form.chuanghao" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="住院号：">
                <el-input v-model="form.zhuyuanhao" placeholder="请输入内容"></el-input>
            </el-form-item>
        </el-form>
        <h2>评估内容</h2>
        <el-form
            label-position="right"
            ref="form"
            :model="form"
            label-width="100px">
            <el-row v-for="(evaluate_item, index) in evaluateContent" :key="evaluate_item">
                <span style="font-weight:bold">{{ evaluate_item }}:</span>
                <el-checkbox-group v-if="index==0" v-model="form.jinshi">
                    <el-col :span="3" v-for="item in evaluateList[index]" :key="item">
                        <el-checkbox :label="item">{{ item }}</el-checkbox>
                    </el-col>
                </el-checkbox-group>
                <el-checkbox-group v-if="index == 1" v-model="form.muyu">
                    <el-col :span="3" v-for="item in evaluateList[index]" :key="item">
                        <el-checkbox :label="item">{{ item }}</el-checkbox>
                    </el-col>
                </el-checkbox-group>
                 <el-checkbox-group v-if="index == 2" v-model="form.xiushi">
                    <el-col :span="3" v-for="item in evaluateList[index]" :key="item">
                        <el-checkbox :label="item">{{ item }}</el-checkbox>
                    </el-col>
                </el-checkbox-group>
                 <el-checkbox-group v-if="index == 3" v-model="form.chuanyi">
                    <el-col :span="3" v-for="item in evaluateList[index]" :key="item">
                        <el-checkbox :label="item">{{ item }}</el-checkbox>
                    </el-col>
                </el-checkbox-group>
            </el-row>
        </el-form>
    </el-main>   
  </div>
</template>

<script>

export default {
    name:'Barden',
    props:{
        special_name: {
            type: String,
            dafault:""
        }
    },
    data(){
        return{
            form:{
                recordDate:'',
                keshi:'',
                bingqu:'',
                chuanghao:'',
                name:'',
                zhuyuanhao:'',
                jinshi:[],
                muyu:[],
                xiushi:[],
                chuanyi:[]
            },
            evaluateContent:[
                '进食','沐浴','修饰','穿衣'
            ],
            evaluateList:[
                ['自理','需要部分帮助','依赖'],
                ['自理','依赖'],
                ['自理','需帮助'],
                ['自理','需要部分帮助','依赖']
            ]
            

        }
    },
    methods:{
        onsubmit(){},
    }

}
</script>

<style lang="scss" scoped>
.detail {
    height: 100%;
}
.header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    height: 30px;
    .el-input {
      width: 100px;
      flex: 0 0 160px;
      margin-right: 15px;
    }
}
.main {
    .el-input {
      width: 100px;
      flex: 0 0 160px;
      margin-right: 15px;
    }
  }
</style>

